<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span class="title">潜在商品验收标准详情</span>
      </div>
      <div>
        <UmyTable
          :loading="tableLoading"
          :data-source="baseTableData"
          :columns="tableColumns"
          :isShowSortNum="true"
          :tableHeight="600"
        />
      </div>
      <FooterFields :footerFields="detailObj" />
    </el-card>
  </div>
</template>
<script>
import UmyTable from '@/components/UmyTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import {
  queryStandardDetailService
} from '@api/commodity/temporaryPurchasingGoods/acceptanceStandard'

export default {
  mixins: [],
  components: {
    UmyTable,
    FooterFields
  },
  data () {
    return {
      tableLoading: false,
      baseTableData: [],
      tableColumns: [],
      detailObj: {
        recordNo: '',
        commitStateStr: '',
        pusherName: '',
        pushTime: '',
        pusherDeptName: '',
        pusherAreaName: '',
        reason: ''
      },
    };
  },
  created () {
    const { recordNo } = this.$route.query;
    this.initTabaleClonum();
    this.getTableData(recordNo);
  },
  methods: {
    async getTableData (recordNo) {
      const res = await queryStandardDetailService({ recordNo }, state => { this.tableLoading = state })
      if (res) {
        const { detailVoList } = res.retData;
        this.detailObj = _.omit(res.retData, 'detailVoList');
        this.handleFormatTableData(detailVoList);
      }
    },
    initTabaleClonum () {
      this.tableColumns = [
        {
          title: '品类',
          align: 'center',
          key: 'categoryPath',
          fixed: 'left'
        },
        {
          title: 'SPU编码',
          align: 'center',
          key: 'spuNo',
          width: 90,
          fixed: 'left'
        },
        {
          title: 'SKU编码',
          align: 'center',
          key: 'skuNo',
          width: 90,
          fixed: 'left'
        },
        {
          title: '商品名称',
          align: 'center',
          key: 'productName'
        },
        {
          title: '规格',
          align: 'center',
          key: 'specDetail',
        },
        {
          title: '品牌',
          align: 'center',
          key: 'brandName'
        },
        {
          title: '验收频率',
          required: true,
          align: 'center',
          children: [
            {
              title: '原值',
              align: 'center',
              key: 'checkFrequency'
            },
            {
              title: '现值',
              align: 'center',
              key: 'checkFrequencyUpdate',
              render: (h, { row }) => {
                if (row.isChangeCheckFrequency) {
                  return <el-link type="danger">{ row.checkFrequencyUpdate}</el-link>
                } else {
                  return <span>{row.checkFrequencyUpdate}</span>
                }
              }
            }
          ]
        },
        {
          title: '验收时间',
          required: true,
          align: 'center',
          children: [
            {
              title: '原值',
              align: 'center',
              key: 'checkTime'
            },
            {
              title: '现值',
              align: 'center',
              key: 'checkTimeUpdate',
              render: (h, { row }) => {
                if (row.isChangeCheckTime) {
                  return <el-link type="danger">{ row.checkTimeUpdate}</el-link>
                } else {
                  return <span>{row.checkTimeUpdate}</span>
                }
              }
            }
          ]
        }
      ];
    },
    // 格式化表头及表格数据
    handleFormatTableData (reData) {
      this.baseTableData = [];
      this.initTabaleClonum();
      reData.forEach((element, oneIndex) => {
        // 准备一行数据的普通列
        let curRow = {
          productName: element.productName,
          brandName: element.brandName,
          categoryPath: element.categoryPath,
          categoryUuid: element.categoryUuid,
          spuNo: element.spuNo,
          skuNo: element.skuNo,
          checkTime: element.checkTime,
          checkTimeUpdate: element.checkTimeUpdate,
          isChangeCheckTime: element.isChangeCheckTime,
          specDetail: element.specDetail,
          checkFrequency: element.checkFrequency,
          checkFrequencyUpdate: element.checkFrequencyUpdate,
          isChangeCheckFrequency: element.isChangeCheckFrequency,
          detailList: element.detailList
        };
        // 新建表头。并准备一行数据的动态列
        element.detailList.forEach((item, index) => {
          this.pushItem(oneIndex, curRow, item, index);
        });
        // 将行，添加到展示列表
        this.baseTableData.push(curRow);
      });
    },
    pushItem (oneIndex, curRow, innerEle, index) {
      // 将行内动态列的信息，平铺到行
      curRow['checkCount' + index] = innerEle.checkCount;
      curRow['checkCountUpdate' + index] = innerEle.checkCountUpdate;
      // 标准值
      curRow['standardValue' + index] = innerEle.standardValue;
      curRow['standardValueUpdate' + index] = innerEle.standardValueUpdate;
      // 上差值
      curRow['upDiffValue' + index] = innerEle.upDiffValue;
      curRow['upDiffValueUpdate' + index] = innerEle.upDiffValueUpdate;
      // 下差值
      curRow['downDiffValue' + index] = innerEle.downDiffValue;
      curRow['downDiffValueUpdate' + index] = innerEle.downDiffValueUpdate;
      // 验收方法
      curRow['checkMethod' + index] = innerEle.checkMethod;
      curRow['checkMethodUpdate' + index] = innerEle.checkMethodUpdate;
      // 1数字5个列可填，2文本3个列可填
      curRow['checkItemType' + index] = innerEle.checkItemType;
      curRow['isChangeCheckCount' + index] = innerEle.isChangeCheckCount;
      curRow['isChangeCheckMethod' + index] = innerEle.isChangeCheckMethod;
      curRow['isChangeDownDiffValue' + index] = innerEle.isChangeDownDiffValue;
      curRow['isChangeUpDiffValue' + index] = innerEle.isChangeUpDiffValue;
      curRow['isChangeStandardValue' + index] = innerEle.isChangeStandardValue;

      // 表头，遍历第1行的动态列时，才追加到表头
      if (oneIndex === 0) {
        if (innerEle.checkItemType !== '2') {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数原值',
                align: 'center',
                key: 'checkCount' + index
              },
              {
                title: '验收次数现值',
                align: 'center',
                key: 'checkCountUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeCheckCount${index}`]) {
                    return <el-link type="danger">{ row[`checkCountUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`checkCountUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '标准值原值',
                align: 'center',
                key: 'standardValue' + index
              },
              {
                title: '标准值现值',
                align: 'center',
                key: 'standardValueUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeStandardValue${index}`]) {
                    return <el-link type="danger">{ row[`standardValueUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`standardValueUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '上差值原值',
                align: 'center',
                key: 'upDiffValue' + index
              },
              {
                title: '上差值现值',
                align: 'center',
                key: 'upDiffValueUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeUpDiffValue${index}`]) {
                    return <el-link type="danger">{ row[`upDiffValueUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`upDiffValueUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '下差值原值',
                align: 'center',
                key: 'downDiffValue' + index
              },
              {
                title: '下差值现值',
                align: 'center',
                key: 'downDiffValueUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeDownDiffValue${index}`]) {
                    return <el-link type="danger">{ row[`downDiffValueUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`downDiffValueUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '验收方法原值',
                align: 'center',
                key: 'checkMethod' + index
              },
              {
                title: '验收方法现值',
                align: 'center',
                key: 'checkMethodUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeCheckMethod${index}`]) {
                    return <el-link type="danger">{ row[`checkMethodUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`checkMethodUpdate${index}`]}</span>
                  }
                }
              }
            ]
          });
        } else {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数原值',
                align: 'center',
                key: 'checkCount' + index
              },
              {
                title: '验收次数现值',
                align: 'center',
                key: 'checkCountUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeCheckCount${index}`]) {
                    return <el-link type="danger">{ row[`checkCountUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`checkCountUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '标准值原值',
                align: 'center',
                key: 'standardValue' + index
              },
              {
                title: '标准值现值',
                align: 'center',
                key: 'standardValueUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeStandardValue${index}`]) {
                    return <el-link type="danger">{ row[`standardValueUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`standardValueUpdate${index}`]}</span>
                  }
                }
              },
              {
                title: '验收方法原值',
                align: 'center',
                key: 'checkMethod' + index
              },
              {
                title: '验收方法现值',
                align: 'center',
                key: 'checkMethodUpdate' + index,
                render: (h, { row }) => {
                  if (row[`isChangeCheckMethod${index}`]) {
                    return <el-link type="danger">{ row[`checkMethodUpdate${index}`]}</el-link>
                  } else {
                    return <span>{row[`checkMethodUpdate${index}`]}</span>
                  }
                }
              }
            ]
          });
        }
      }
    },
    handleBack () {
      this.$router.go(-1);
    },
  }
};
</script>
